<template>
  <div class="skills-container">
    <!-- 页面头部 -->
    <div class="header">
      <text class="title">{{ sectName }}武学</text>
      <text class="subtitle">修炼门派武学，提升实力境界</text>
    </div>

    <!-- 技能分类标签 -->
    <div class="skill-tabs">
      <div 
        v-for="(tab, index) in skillTabs" 
        :key="index"
        class="tab-item"
        :class="{ active: activeTab === index }"
        @click="switchTab(index)"
      >
        {{ tab.name }}
      </div>
    </div>

    <!-- 技能列表 -->
    <div class="skills-list" v-if="!loading">
      <div 
        v-for="skill in filteredSkills" 
        :key="skill.id"
        class="skill-card"
        @click="showSkillDetail(skill)"
      >
        <div class="skill-icon">
          <image :src="skill.icon || '/static/icons/skill-default.png'" mode="aspectFit" />
        </div>
        <div class="skill-info">
          <div class="skill-name">{{ skill.name }}</div>
          <div class="skill-type">{{ skill.type }}</div>
          <div class="skill-desc">{{ skill.description }}</div>
          <div class="skill-status" v-if="skill.upgradeDescription">
            {{ skill.upgradeDescription }}
          </div>
        </div>
        <div class="skill-actions">
          <button 
            v-if="!skill.upgradeDescription" 
            class="learn-btn" 
            size="mini"
            @click.stop="learnSkill(skill)"
          >
            学习
          </button>
          <button 
            v-else 
            class="upgrade-btn" 
            size="mini"
            @click.stop="upgradeSkill(skill)"
          >
            升级
          </button>
        </div>
      </div>
    </div>

    <!-- 加载状态 -->
    <div class="loading" v-if="loading">
      <text>加载中...</text>
    </div>

    <!-- 技能详情弹窗 -->
    <uni-popup ref="skillDetailPopup" type="center">
      <div class="skill-detail-modal" v-if="selectedSkill">
        <div class="modal-header">
          <text class="modal-title">{{ selectedSkill.name }}</text>
          <text class="close-btn" @click="closeSkillDetail">×</text>
        </div>
        <div class="modal-content">
          <div class="skill-detail-info">
            <text class="detail-label">类型：</text>
            <text class="detail-value">{{ selectedSkill.type }}</text>
          </div>
          <div class="skill-detail-info">
            <text class="detail-label">描述：</text>
            <text class="detail-value">{{ selectedSkill.description }}</text>
          </div>
          <div class="skill-detail-info">
            <text class="detail-label">效果：</text>
            <text class="detail-value">{{ selectedSkill.effect }}</text>
          </div>
          <div class="skill-detail-info" v-if="selectedSkill.upgradeDescription">
            <text class="detail-label">当前等级：</text>
            <text class="detail-value">{{ selectedSkill.upgradeDescription }}</text>
          </div>
        </div>
        <div class="modal-actions">
          <button 
            v-if="!selectedSkill.upgradeDescription" 
            class="modal-learn-btn"
            @click="learnSkill(selectedSkill)"
          >
            学习武学
          </button>
          <button 
            v-else 
            class="modal-upgrade-btn"
            @click="upgradeSkill(selectedSkill)"
          >
            升级武学
          </button>
        </div>
      </div>
    </uni-popup>
  </div>
</template>

<script>
import { getSectSkills } from '@/api/character'

export default {
  name: 'SectSkills',
  data() {
    return {
      loading: true,
      sectName: '门派',
      sectId: 1,
      activeTab: 0,
      skillTabs: [
        { name: '全部', type: '' },
        { name: '内功', type: '内功' },
        { name: '拳法', type: '拳法' },
        { name: '剑法', type: '剑法' },
        { name: '刀法', type: '刀法' },
        { name: '轻功', type: '轻功' }
      ],
      skills: [],
      selectedSkill: null
    }
  },
  computed: {
    filteredSkills() {
      const currentTab = this.skillTabs[this.activeTab]
      if (!currentTab.type) {
        return this.skills
      }
      return this.skills.filter(skill => skill.type === currentTab.type)
    }
  },
  mounted(options) {
    this.loadSectSkills()
  },
  methods: {
    async loadSectSkills() {
      try {
        this.loading = true
        const response = await getSectSkills({
          sect_id: this.sectId
        })
        
        if (response.code === 1) {
          this.skills = response.data || []
        } else {
          uni.showToast({
            title: response.message || '获取技能列表失败',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('获取门派技能失败:', error)
        uni.showToast({
          title: '网络错误',
          icon: 'none'
        })
      } finally {
        this.loading = false
      }
    },
    
    switchTab(index) {
      this.activeTab = index
    },
    
    showSkillDetail(skill) {
      this.selectedSkill = skill
      this.$nextTick(() => {
        if (this.$refs.skillDetailPopup && this.$refs.skillDetailPopup.open) {
          this.$refs.skillDetailPopup.open()
        }
      })
    },
    
    closeSkillDetail() {
      if (this.$refs.skillDetailPopup && this.$refs.skillDetailPopup.close) {
        this.$refs.skillDetailPopup.close()
      }
      this.selectedSkill = null
    },
    
    async learnSkill(skill) {
      try {
        uni.showToast({
          title: '学习功能开发中',
          icon: 'none'
        })
      } catch (error) {
        console.error('学习技能失败:', error)
        uni.showToast({
          title: '学习失败',
          icon: 'none'
        })
      }
    },
    
    async upgradeSkill(skill) {
      try {
        uni.showToast({
          title: '升级功能开发中',
          icon: 'none'
        })
      } catch (error) {
        console.error('升级技能失败:', error)
        uni.showToast({
          title: '升级失败',
          icon: 'none'
        })
      }
    }
  }
}
</script>

<style scoped>
.skills-container {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
  width: 100%;
  position: relative;
}

.header {
  text-align: center;
  margin-bottom: 30rpx;
  padding: 30rpx 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 20rpx;
  color: white;
}

.title {
  font-size: 48rpx;
  font-weight: bold;
  display: block;
  margin-bottom: 10rpx;
}

.subtitle {
  font-size: 28rpx;
  opacity: 0.9;
}

.skill-tabs {
  display: flex;
  background: white;
  border-radius: 15rpx;
  padding: 10rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 20rpx 10rpx;
  font-size: 28rpx;
  color: #666;
  border-radius: 10rpx;
  transition: all 0.3s;
}

.tab-item.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-weight: bold;
}

.skills-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.skill-card {
  display: flex;
  align-items: center;
  background: white;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
}

.skill-card:active {
  transform: scale(0.98);
}

.skill-icon {
  width: 100rpx;
  height: 100rpx;
  margin-right: 30rpx;
  border-radius: 15rpx;
  overflow: hidden;
  background: linear-gradient(135deg, #ffeaa7 0%, #fab1a0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.skill-icon image {
  width: 80rpx;
  height: 80rpx;
}

.skill-info {
  flex: 1;
}

.skill-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.skill-type {
  font-size: 24rpx;
  color: #667eea;
  background: rgba(102, 126, 234, 0.1);
  padding: 4rpx 12rpx;
  border-radius: 12rpx;
  display: inline-block;
  margin-bottom: 10rpx;
}

.skill-desc {
  font-size: 26rpx;
  color: #666;
  line-height: 1.4;
  margin-bottom: 10rpx;
}

.skill-status {
  font-size: 24rpx;
  color: #00b894;
  font-weight: bold;
}

.skill-actions {
  display: flex;
  flex-direction: column;
  gap: 10rpx;
}

.learn-btn, .upgrade-btn {
  padding: 15rpx 25rpx;
  border-radius: 25rpx;
  font-size: 24rpx;
  border: none;
}

.learn-btn {
  background: linear-gradient(135deg, #00b894 0%, #00a085 100%);
  color: white;
}

.upgrade-btn {
  background: linear-gradient(135deg, #fdcb6e 0%, #e17055 100%);
  color: white;
}

.loading {
  text-align: center;
  padding: 100rpx 0;
  color: #999;
  font-size: 28rpx;
}

.skill-detail-modal {
  width: 600rpx;
  background: white;
  border-radius: 20rpx;
  overflow: hidden;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.modal-title {
  font-size: 32rpx;
  font-weight: bold;
}

.close-btn {
  font-size: 40rpx;
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
}

.modal-content {
  padding: 30rpx;
}

.skill-detail-info {
  display: flex;
  margin-bottom: 20rpx;
  align-items: flex-start;
}

.detail-label {
  font-size: 28rpx;
  color: #666;
  width: 120rpx;
  flex-shrink: 0;
}

.detail-value {
  font-size: 28rpx;
  color: #333;
  flex: 1;
  line-height: 1.4;
}

.modal-actions {
  padding: 0 30rpx 30rpx;
}

.modal-learn-btn, .modal-upgrade-btn {
  width: 100%;
  padding: 25rpx;
  border-radius: 25rpx;
  font-size: 28rpx;
  border: none;
  color: white;
}

.modal-learn-btn {
  background: linear-gradient(135deg, #00b894 0%, #00a085 100%);
}

.modal-upgrade-btn {
  background: linear-gradient(135deg, #fdcb6e 0%, #e17055 100%);
}
</style>